<template>
  <div class="personalSide clearfix">


    <!-- <div class="quickSide" :class="isShowSide?'active':''">
      <div class="quickcoin clearfix" @click="isShowSide=!isShowSide">
        <img class="coinlogo" src="../assets/images/menu.png" />
        <div class="coinDetail">
          <p class="cointitle">{{$t('l.add_74')}}</p>
        </div>
      </div>
      <div class="coinlist">
        <div class="quickcoin clearfix" v-for="(item,index) in currencyInfo" :key="index">
          <img class="coinlogo" :src="item.icon" @click="isShowSide=!isShowSide" />
          <div class="coinDetail">
            <p class="coinname">{{item.code}}</p>
            <p class="coinbalance">{{item.availableAmount}}</p>
            <div class="coinRecharge">
              <router-link
                :to="{ path: '/recharge', query: {coin: item.code} }"
                class="chargebtn active"
              >{{$t('l.personal_197')}}</router-link>
              <router-link
                :to="{ path: '/withdraw', query: {coin: item.code} }"
                class="chargebtn"
              >{{$t('l.personal_234')}}</router-link>
            </div>
          </div>
        </div>
      </div>
    </div> -->


    <div v-if="isMobile" class="silderTogo" @click="change_showSide_fn">
      <i :class="isShowSide ? 'el-icon-arrow-right' : 'el-icon-arrow-left'" style="font-size: 20px"></i>
    </div>
    <div class="sideMenu" :class="isShowSide? 'active' : ''">
      <div class="menuHead">
        <img src="../assets/images/menuicon1.png" />
        {{$t('l.add_75')}}
      </div>
      <router-link to="/personal" class="menuitem">{{$t('l.personal_1')}}</router-link>
    <!--  <router-link :to="{path: authurl}" class="menuitem">{{$t('l.personal_95')}}</router-link>
      <router-link to="/safeSetting" class="menuitem">{{$t('l.header_19')}}</router-link>
      <router-link to="/apiManagement" class="menuitem">{{$t('l.add_76')}}</router-link> -->
      <router-link to="/withdrawAddress" class="menuitem">{{$t('l.personal_241')}}</router-link>
      <!-- <router-link to="/paymenttype" class="menuitem">{{$t('l.personal_55')}}</router-link> -->
      <router-link to="/invite" class="menuitem">{{$t('l.personal_162')}}</router-link>
      <div class="menuHead">
        <img src="../assets/images/menuicon2.png" />
        {{$t('l.add_77')}}
      </div>
      <router-link to="/myAssets" class="menuitem">{{$t('l.add_16')}}</router-link>
      <router-link to="/recharge" class="menuitem">{{$t('l.personal_197')}}</router-link>
      <router-link to="/withdraw" class="menuitem">{{$t('l.personal_234')}}</router-link>
      <router-link to="/rechargeRecord" class="menuitem">{{$t('l.personal_204')}}</router-link>
      <div class="menuHead">
        <img src="../assets/images/menuicon3.png" />
        {{$t('l.add_78')}}
      </div>
      <router-link to="/commissionRecord" class="menuitem">{{$t('l.personal_125')}}</router-link>
      <router-link to="/historyMissionRecord" class="menuitem">{{$t('l.trade_92')}}</router-link>
      <router-link to="/historyMissionDeal" class="menuitem">{{$t('l.personal_145')}}</router-link>
    </div>
  </div>
</template>
<script>
import { api } from "@/api/api";
export default {
  data() {
    return {
      authurl: "",
      verifiedStatus: 0,
      currencyInfo: []
    };
  },
  computed: {
    isShowSide() {
      return this.$store.state.im.isShowSide;
    },
    isMobile() {
      return this.$store.state.im.isMobile;
    }
  },
  created() {
    this.baseinfo();
  },
  methods: {
    change_showSide_fn() {
      this.$store.dispatch('im/updata_ShowSide', !this.isShowSide);
    },
    //基本信息
    async baseinfo() {
      let that = this;
      let res = await api.baseinfo();
      if (res.data.code == 0) {
        that.currencyInfo = res.data.data.currencyInfo;
        let intro = res.data.data.info;
        this.verifiedStatus = intro.verifiedStatus;
        if(intro.idType==1){
          if(intro.verifiedLevel==""){
            this.authurl = "/c1Auth"
          }else if(intro.verifiedLevel<3){
            this.authurl = "/c1Auth"
          }else{
            this.authurl = "/c2Auth"
          }
        }else{
          if(intro.verifiedLevel==""){
            this.authurl = "/c1Auth"
          }else if(intro.verifiedLevel==1){
            this.authurl = "/c2Auth"
          }else{
            this.authurl = "/c3Auth"
          }
        }
      } else {
        that.$layer.msg(res.data.msg);
      }
    }
  },
  mounted() {

  }
};
</script>
<style lang="less">
.silderTogo {
  width: 20px;
  height: 100%;
  float:left;
  padding-top: 20px;
  box-sizing: border-box;
}
.active {

  &.sideMenu {
    transition: all 0.5s;
    width: 0!important;
  }
  .menuHead {
    display: none;
  }
  .menuitem {
    display: none;
  }
}


.personalHome {
  .personalSide {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 0;
    z-index: 9;
    background: #f2f6fa;
    box-shadow: 3px 0px 15px 0px rgba(29, 41, 121, 0.1);
    .quickSide {
      float: left;
      overflow-y: auto;
      height: 100%;
      &.active {
        .coinlist {
          .coinlogo {
            transition: all 0.5s;
            padding: 0;
          }
        }
        .coinlogo {
          transition: all 0.5s;
          width: 24px;
          height: 24px;
        }
        .coinDetail {
          transition: all 0.5s;
          display: block;
        }
        .quickcoin {
          transition: all 0.5s;
          padding-top: 14px;
          padding-bottom: 0;
        }
        .coinlist {
          transition: all 0.5s;
          padding: 0 18px;
        }
        & + .sideMenu {
          transition: all 0.5s;
          display: none;
        }
      }

      .quickcoin {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .coinlogo {
        float: left;
        width: 20px;
        height: 20px;
        padding: 0 16px;
        cursor: pointer;
      }
      .coinDetail {
        display: none;
        padding-left: 32px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(51, 56, 94, 0.08);
        .cointitle {
          font-size: 16px;
          color: #33385e;
          line-height: 20px;
          font-weight: 500;
        }
        .coinname {
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          color: #33385e;
          padding-bottom: 3px;
        }
        .coinbalance {
          font-size: 18px;
          font-familyA: "Roboto-Medium";
          font-weight: 500;
          color: rgba(51, 56, 94, 1);
          line-height: 21px;
          padding-bottom: 10px;
        }
        .coinRecharge {
          .chargebtn {
            display: inline-block;
            vertical-align: middle;
            width: 66px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border: 1px solid rgba(51, 56, 94, 1);
            border-radius: 12px;
            cursor: pointer;
          }
        }
      }
    }
    .sideMenu {
      float: left;
      width: 150px;
      min-height: 100%;
      background: #fff;
      .menuHead {
        padding: 19px 0 9px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 56, 94, 1);
        line-height: 22px;
        img {
          float: left;
          width: 16px;
          height: 16px;
          padding-left: 22px;
          padding-right: 7px;
          padding-top: 2px;
          vertical-align: middle;
        }
      }
      .menuitem {
        display: block;
        height: 48px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 56, 94, 1);
        line-height: 48px;
        text-indent: 45px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &.active {
          border-right: 4px solid #2D8DFE;
        }
        &.router-link-active {
          -webkit-transition: all .3s;
          -o-transition: all .3s;
          transition: all .3s;
          border-right: 4px solid #3360ff;
          background: linear-gradient(-90deg,rgba(51, 96, 255, 0.4) 0%,rgba(4, 166, 254, 0.1) 100%);
        }
      }
    }
  }
  .personalSide:hover .bscroll-vertical-scrollbar {
    opacity: 1 !important;
  }
}
</style>
